<template>
  <div id="findTalent">
    <!-- 1.智能匹配首页 -->
    <div v-if="showDiv == 1" class="showDiv01">
      <div class="div01">
        <p>拒绝翻车从<span>找对达人</span>开始</p>
        <span class="history" @click="seeHistory">查看历史匹配记录 ></span>
      </div>
      <div class="startBtn" @click="
          showDiv = 2;
          showGoods = 1;
          goodsWord = '';
          priceMine = '';
        ">
        开启智能匹配
      </div>
      <div class="imgBox">
        <div class="imgItem" @click="showDiv = 2">
          <img src="@/assets/wang/work/img01.png" alt="" />
        </div>
        <div class="imgItem" @click="showDiv = 2">
          <img src="@/assets/wang/work/img02.png" alt="" />
        </div>
        <div class="imgItem" @click="showDiv = 2">
          <img src="@/assets/wang/work/img03.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 2.搜索商品 -->
    <div v-if="showDiv == 2" class="showDiv02">
      <img src="@/assets/wang/work/talent.png" alt="" class="talentBanner" />
      <img src="@/assets/wang/work/goodsIcon.png" alt="" class="goodsIcon" />
      <div class="showGoods">
        <div class="topBox">
          <button>对标商品</button>
          <span @click="
              seeHistory();
              clearOptions();
            ">查看历史匹配记录 ></span>
        </div>
        <!-- 搜索商品 -->
        <section v-if="showGoods == 1">
          <div class="searchBox">
            <input type="text" v-model="goodsWord" placeholder="请输入需要推广的商品名称" @keyup.enter="toSearch()" />
            <div @click="toSearch()">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <p class="errText" v-if="isNull">*请输入需要推广的商品名称</p>
        </section>

        <!-- 搜索结果 -->
        <div class="searchResult" v-if="showGoods == 2">
          <div class="searchBox searchBox01">
            <input type="text" v-model="goodsWord" placeholder="请输入需要推广的商品名称" @keyup.enter="toSearchGoods01()" />
            <div @click="toSearchGoods01()">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <div class="condition">
            <span class="title">筛选条件</span>
            <div class="conditionItem">
              <span class="itemTitle">售价</span>
              <div class="inputBox">
                <input type="number" v-model="price01" @input="checkValue" @blur="checkPrice" @focus="add" />
                <span>元</span>
              </div>
              <span class="to">-</span>
              <div class="inputBox">
                <input type="number" v-model="price02" @input="checkValue" @blur="checkPrice" />
                <span>元</span>
              </div>
            </div>
            <div class="conditionItem">
              <span class="itemTitle itemTitle1">佣金率</span>
              <el-select v-model="rate01" placeholder="请选择" @change="checkRate">
                <el-option v-for="item in options" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <span class="to">-</span>
              <el-select v-model="rate02" placeholder="请选择" @change="checkRate">
                <el-option v-for="item in options" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <p class="tips">请从以下列表中选择1个您的对标商品（即榜样商品）</p>
          <section style="min-height: 460px">
            <table class="table" v-if="goodsList.length != 0 && !loadingG">
              <thead>
                <tr>
                  <th>商品</th>
                  <th>售价</th>
                  <th>原价</th>
                  <th>佣金率</th>
                  <th>
                    近30天订单量
                    <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sort == 1" /><img
                      src="@/assets/meng/no_up_down.png" v-else @click="sort_fun(true, 1)" /><img
                      src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sort == 1" /><img
                      src="@/assets/meng/no_down_up.png" v-else @click="sort_fun(false, 1)" />
                  </th>
                  <th>
                    近30天全网销量
                    <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sort == 2" /><img
                      src="@/assets/meng/no_up_down.png" v-else @click="sort_fun(true, 2)" /><img
                      src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sort == 2" /><img
                      src="@/assets/meng/no_down_up.png" v-else @click="sort_fun(false, 2)" />
                  </th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in goodsList" :key="index">
                  <td>
                    <div class="goodsBox" @click="toGoodsPage(item.proId)">
                      <img :src="item.proLogo" alt="" class="avator" />
                      <div class="source">
                        <SourceIcon :sourceid="item.fromId" />
                      </div>
                      <p>
                        {{ item.proTitle }}
                      </p>
                    </div>
                  </td>
                  <td>￥{{ item.proPrice }}</td>
                  <td>{{ item.proCostPrice }}</td>
                  <td>
                    <span v-if="item.commissionRate != 0">{{ (item.commissionRate * 100).toFixed(1) }}%</span>
                    <span v-else>0%</span>
                  </td>
                  <td>{{ format_num(item.volume) }}</td>
                  <td>{{ format_num(item.volumeIncr) }}</td>
                  <td>
                    <img src="@/assets/wang/work/checked.png" class="checkImg" v-if="checked == item.proId" />
                    <img src="@/assets/wang/work/unchecked.png" class="checkImg" v-if="checked != item.proId"
                      @click="checked = item.proId" />
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-loading="loadingG" v-if="loadingG" class="loading" element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"></div>
            <div class="empty addTop" v-show="!loadingG && goodsList.length == 0">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </section>
          <el-pagination background layout="prev, pager, next, jumper" :total="count" :page-size="10"
            :current-page="goodsPage" @current-change="toSearchGoods" v-if="count"></el-pagination>
          <div class="optionBtnBox">
            <button @click="
                showDiv = 2;
                showGoods = 1;
                goodsWord = '';
                clearOptions();
              ">
              取消
            </button>
            <button @click="showDiv = 3">下一步</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 3.推广预算 -->
    <div v-if="showDiv == 3" class="showDiv02">
      <img src="@/assets/wang/work/talent.png" alt="" class="talentBanner" />
      <img src="@/assets/wang/work/priceIcon.png" alt="" class="goodsIcon" />
      <div class="budgetBox">
        <div class="topBox">
          <div class="leftBox">
            <button>推广预算</button>
            <p>请选择推广预算<span>(按小时计算)</span></p>
          </div>
          <p class="rightText" @click="seeHistory">查看历史匹配记录 ></p>
        </div>
        <div class="budgetRadio">
          <div class="radioItem" :class="{ activePrice: activePrice == 6 }" @click="activePrice = 6">
            <p>＜1万元</p>
            <p>尝鲜体验</p>
          </div>
          <div class="radioItem" :class="{ activePrice: activePrice == 5 }" @click="activePrice = 5">
            <p>1-3万元</p>
            <p>基础预算</p>
          </div>
          <div class="radioItem" :class="{ activePrice: activePrice == 4 }" @click="activePrice = 4">
            <p>3-5万元</p>
            <p>基础预算</p>
          </div>
          <div class="radioItem" :class="{ activePrice: activePrice == 3 }" @click="activePrice = 3">
            <p>5-8万元</p>
            <p>较多预算</p>
          </div>
          <div class="radioItem" :class="{ activePrice: activePrice == 2 }" @click="activePrice = 2">
            <p>8-10万元</p>
            <p>较多预算</p>
          </div>
          <div class="radioItem" :class="{ activePrice: activePrice == 0 }" @click="activePrice = 0">
            <p>
              <input type="number" placeholder="自定义" class="myPrice" v-model="priceMine" />
              万元
            </p>
            <p>自定义预算</p>
          </div>
        </div>
        <div class="buttonBox">
          <button @click="showDiv = 2">上一步</button>
          <button @click="productmatch">智能匹配</button>
          <button @click="toEgImg">查看示例</button>
        </div>
      </div>
    </div>
    <!-- 4. -->
    <div v-if="showDiv == 4" class="showDiv04" ref="capture">
      <div class="topDiv">
        <div>
          <p>掌上精选智能匹配达人查询结果</p>
          <button @click="
              showDiv = 2;
              showGoods = 1;
              goodsWord = '';
              priceMine = '';
            ">
            重新匹配
          </button>
        </div>
        <div>
          <span v-if="matchTime">数据查询时间: {{ matchTime }}</span>
          <span v-else></span>
          <span @click="seeHistory">查看历史匹配记录 ></span>
        </div>
      </div>
      <section v-if="!loadingP && talentList != null">
        <p class="tips">
          共匹配到<span>{{ talentCount }}</span>个达人,仅展示排名靠前的TOP5达人详情. 如需全部达人信息,请
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <span slot="reference">联系客服</span>
          </el-popover>
        </p>
        <div class="tabBox">
          <div class="radioGroupBox">
            <el-radio-group v-model="talentRadio">
              <el-radio-button label="达人1" v-if="talentCount >= 1"></el-radio-button>
              <el-radio-button label="达人2" v-if="talentCount >= 2"></el-radio-button>
              <el-radio-button label="达人3" v-if="talentCount >= 3"></el-radio-button>
              <el-radio-button label="达人4" v-if="talentCount >= 4"></el-radio-button>
              <el-radio-button label="达人5" v-if="talentCount >= 5"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="export" @click="exportPdf">
            <img src="@/assets/meng/star_map04.png" alt="" />
            <span>导出</span>
          </div>
        </div>
        <div class="detailsBox" v-if="!loadingD && talentInfo">
          <div class="talentDiv01">
            <div class="div01">
              <img :src="talentInfo.logo" alt="" class="avator" @click="toTalentPage(talentInfo.authorId)" />
              <div class="infoBox">
                <div class="titleBox">
                  <p @click="toTalentPage(talentInfo.authorId)">
                    {{ talentInfo.nickName }}
                  </p>
                  <el-popover placement="bottom" trigger="hover">
                    <vue-qr :size="150" :margin="0" :auto-color="true" :dot-scale="1" :text="talentInfo.shareLink" />
                    <p style="
                        text-align: center;
                        font-size: 14px;
                        color: #888888;
                        margin-top: 10px;
                      ">
                      查看抖音主页
                    </p>
                    <img src="@/assets/meng/i21.png" alt="" slot="reference" v-if="talentInfo.shareLink" />
                  </el-popover>
                </div>
                <p class="idText">抖音号:{{ talentInfo.uniqueId }}</p>
                <div class="info">
                  <div>
                    <img src="@/assets/wang/tdetails/Gender.png" alt="" />
                    <span v-if="talentInfo.gender == 2">女</span>
                    <span v-else-if="talentInfo.gender == 1">男</span>
                    <span v-else>--</span>
                    <p></p>
                  </div>
                  <div>
                    <img src="@/assets/wang/tdetails/age.png" alt="" />
                    <span>{{ talentInfo.birthday }}岁</span>
                    <p></p>
                  </div>
                  <div>
                    <img src="@/assets/wang/tdetails/map.png" alt="" />
                    <span v-if="talentInfo.province">{{
                      talentInfo.province
                    }}</span>
                    <span v-else>--</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="div02">
              <div class="divItem">
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.totalFans) }}</p>
                  <p>粉丝总量</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.totalFavorite) }}</p>
                  <p>点赞总量</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.expectLook) }}</p>
                  <p>预期观看人数</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.liveInteractionRate) }}%</p>
                  <p>直播互动率</p>
                </div>
              </div>
              <div class="divItem">
                <div class="itemdiv">
                  <p>
                    {{ format_num(talentInfo.liveProCount) }}/{{
                      format_num(talentInfo.liveProVolumeCount)
                    }}
                  </p>
                  <p>直播商品数/动销商品数</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.liveShopCount) }}</p>
                  <p>带货直播场次</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.avgLook) }}</p>
                  <p>平均场观人数</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.avgLookTime) }}</p>
                  <p>平均停留时长</p>
                </div>
              </div>
            </div>
            <div class="div03">
              <div class="score">
                <p v-if="talentRadio == '达人1'">
                  {{ talentScoreList[0].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人2'">
                  {{ talentScoreList[1].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人3'">
                  {{ talentScoreList[2].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人4'">
                  {{ talentScoreList[3].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人5'">
                  {{ talentScoreList[4].toFixed(1) }}
                </p>
                <p>
                  <span>匹配分</span>
                  <el-tooltip class="talentInfo" effect="light" placement="top" popper-class="mytooltip">
                    <div slot="content">
                      匹配分：表示商品与该达人的匹配度<br />
                      取值范围60-100，分值越高，匹配度越高<br />
                    </div>
                    <img src="@/assets/meng/search_result04.png" alt="" />
                  </el-tooltip>
                </p>
              </div>
              <div class="score">
                <section v-if="
                    talentInfo.tel ||
                      talentInfo.wechat ||
                      talentInfo.qq ||
                      talentInfo.email
                  ">
                  <p v-if="talentInfo.tel">{{ talentInfo.tel }}</p>
                  <p v-if="!talentInfo.tel && talentInfo.wechat">
                    {{ talentInfo.wechat }}
                  </p>
                  <p v-if="
                      !talentInfo.tel && !talentInfo.wechat && talentInfo.qq
                    ">
                    {{ talentInfo.qq }}
                  </p>
                  <p v-if="
                      !talentInfo.tel &&
                        !talentInfo.wechat &&
                        !talentInfo.qq &&
                        talentInfo.email
                    ">
                    {{ talentInfo.email }}
                  </p>
                  <p>联系方式</p>
                </section>
                <section v-if="
                    !talentInfo.tel &&
                      !talentInfo.wechat &&
                      !talentInfo.qq &&
                      !talentInfo.email
                  ">
                  <el-popover placement="right-start" trigger="hover">
                    <div class="message_content">
                      <div class="popper_arrow"></div>
                      <img src="@/assets/img/xiaozhushou_qr.jpg" />
                      <div>工作日：9:30--18:30</div>
                    </div>
                    <p slot="reference" class="kefuText">请联系客服</p>
                  </el-popover>
                  <p class="kefuText01">联系方式</p>
                </section>
              </div>
            </div>
          </div>
          <!-- 直播报价 -->
          <div class="talentDiv02" v-if="
              livepriceList.brandHour &&
                livepriceList.brandJoin &&
                livepriceList.electricityJoin &&
                livepriceList.electricitySpecial
            ">
            <div class="myTitleBox">
              <img src="@/assets/wang/tdetails/live.png" alt="" />
              <p class="bigText">直播报价</p>
            </div>
            <div class="priceBox">
              <div class="priceItem" v-if="livepriceList.brandHour">
                <p>
                  <span>¥ {{ livepriceList.brandHour }} / 小时</span>&nbsp;&nbsp;&nbsp;<span>¥
                    {{ livepriceList.brandDay }} / 天</span>
                </p>
                <p>品牌专场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.brandJoin">
                <p>¥ {{ livepriceList.brandJoin }} / 商品</p>
                <p>品牌拼场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.electricityJoin">
                <p>¥ {{ livepriceList.electricityJoin }} / 商品</p>
                <p>电商专场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.electricitySpecial">
                <p>¥ {{ livepriceList.electricitySpecial }} / 商品</p>
                <p>电商拼场</p>
              </div>
            </div>
          </div>
          <div class="myTitleBox addtop">
            <img src="@/assets/wang/tdetails/live.png" alt="" />
            <p class="bigText">直播电商战绩</p>
          </div>
          <!-- echarts图表 -->
          <div class="talentDiv03">
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/my_header03.png" alt="" /> -->
                <p>商品分类分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie :valueData="goodsKindData" v-if="!loading01 && goodsKindData.length != 0" />
                <div v-if="goodsKindData.length == 0 && !loading01" class="noDataNoticewl">
                  目前没有可以查看的数据哟~
                </div>
                <div v-loading="loading01" v-if="loading01" class="loading addTop" element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/shop_details02.png" alt="" /> -->
                <p>商品价格分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie :valueData="priceKindList" v-if="!loading02 && priceKindList.length != 0" />
                <div v-if="!loading02 && priceKindList.length == 0" class="noDataNoticewl">
                  目前没有可以查看的数据哟~
                </div>
                <div v-loading="loading02" v-if="loading02" class="loading addTop" element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/video02_01.png" alt="" /> -->
                <p>直播观众性别分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie :valueData="genderList" v-if="!loading03 && genderList.length != 0" />
                <div v-if="!loading03 && genderList.length == 0" class="noDataNoticewl">
                  目前没有可以查看的数据哟~
                </div>
                <div v-loading="loading03" v-if="loading03" class="loading addTop" element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/video02_01.png" alt="" /> -->
                <p>观众年龄分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie :valueData="ageXData" v-if="!loading03 && ageXData.length != 0" />
                <div v-if="!loading03 && ageXData.length == 0" class="noDataNoticewl">
                  目前没有可以查看的数据哟~
                </div>
                <div v-loading="loading03" v-if="loading03" class="loading addTop" element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"></div>
              </div>
            </div>
          </div>
          <!-- 直播战绩 -->
          <div class="talentDiv04">
            <div class="myTitleBox">
              <!-- <img src="@/assets/wang/live/gift.png" alt="" /> -->
              <p>直播战绩TOP10</p>
            </div>
            <table class="table" v-if="tableData.length != 0 && !loading04">
              <thead>
                <tr>
                  <th>开播时间</th>
                  <th>直播商品数</th>
                  <th>动销商品数</th>
                  <th>动销比</th>
                  <th>直播时长</th>
                  <th>场观人数</th>
                  <th>平均在线人数</th>
                  <th>平均停留时长</th>
                  <th>UV价值</th>
                  <th>客单价</th>
                  <th>总销量</th>
                  <th>总销售额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ timestamp(item.beginTime, "Y-M-D") }}</td>
                  <td>{{ format_num(item.liveProCount) }}</td>
                  <td>{{ format_num(item.liveProVolumeCount) }}</td>
                  <td>{{ item.proRate.toFixed(1) }}%</td>
                  <td>
                    {{ format_time((item.endTime - item.beginTime) * 1000) }}
                  </td>
                  <td>{{ format_num(item.sumPeople) }}</td>
                  <td>{{ format_num(item.avgonlinePeople) }}</td>
                  <td>{{ item.avgLookTime }}</td>
                  <td>{{ item.uv.toFixed(1) }}</td>
                  <td>{{ item.avgPrice.toFixed(1) }}</td>
                  <td>{{ format_num(item.liveVolume) }}</td>
                  <td>{{ format_num(item.livesales) }}</td>
                </tr>
              </tbody>
            </table>
            <div v-if="!loading04 && tableData.length == 0" class="noDataNoticewl">
              目前没有可以查看的数据哟~
            </div>
            <div v-loading="loading04" v-if="loading04" class="loading addTop" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"></div>
          </div>
        </div>
        <div v-loading="loadingD" v-if="loadingD" class="loading addTop" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"></div>
      </section>
      <div v-loading="loadingP" v-if="loadingP" class="loading addTop" element-loading-text="数据雷达正在为您精准运算，请稍后~"
        element-loading-spinner="el-icon-loading"></div>
      <div class="empty addTop" v-show="!loadingP && talentList == null">
        <img src="@/assets/meng/empty.png" />
        <p>抱歉,数据雷达暂未查询到符合您要求的达人,换个条件试试吧~</p>
      </div>
    </div>
    <!-- 5.历史匹配记录 -->
    <div v-if="showDiv == 5" class="showDiv05">
      <div class="topBox">
        <button>历史匹配记录</button>
        <span @click="
            showDiv = 2;
            goodsWord = '';
            priceMine = '';
            showGoods = 1;
          ">重新匹配 ></span>
      </div>
      <section style="min-height: 820px">
        <table class="table" v-show="!loadingH && historyList.length != 0">
          <thead>
            <tr>
              <th>查询日期</th>
              <th>对标商品</th>
              <th>推广预算</th>
              <th>推荐达人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in historyList" :key="index">
              <td>{{ item.createTime.split(" ")[0] }}</td>
              <td>
                <div class="goodsBox" @click="toGoodsPage(item.productId)">
                  <img :src="item.proLogo" alt="" class="avator" />
                  <div class="source" v-if="item.fromId != 6">
                    <SourceIcon :sourceid="item.fromId" />
                  </div>
                  <p>
                    {{ item.proTitle }}
                  </p>
                </div>
              </td>
              <td>{{ item.priceDescription }}</td>
              <td>
                <div class="talentBox">
                  <img v-for="(item01, index01) in item.listDetail" :key="index01" :src="item01.authorLogo"
                    @click="toTalentPage(item01.author)" />
                </div>
                <!-- <span>未匹配到达人</span> -->
              </td>
              <td>
                <button class="detailsBtn" @click="toMatchDetails(item)">
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-loading="loadingH" v-if="loadingH" class="loading" element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"></div>
        <div class="empty" v-show="!loadingH && historyList.length == 0">
          <img src="../../../assets/meng/empty.png" />
          <p>目前没有可以查看的数据哟~</p>
        </div>
      </section>
      <el-pagination background layout="prev, pager, next, jumper" :total="countH" :page-size="10" :current-page="pageH"
        @current-change="getHistoryList" v-if="countH"></el-pagination>
    </div>
  </div>
</template>

<script>
import SourceIcon from "@/component/SourceIcon.vue";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie.vue";
import DetailsBar from "@/pages/wang/talent/tdetails/component/DetailsBar";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
export default {
  name: "",
  components: { BigPie, DetailsBar, SourceIcon },
  data () {
    return {
      checked: "",
      count: "",
      page: 1,
      showDiv: 1, //1:第一页 2：搜商品  3.选择推广预算  4.匹配达人 5.历史匹配记录
      showGoods: 1, //1:商品搜索 2：搜索结果
      goodsWord: "",
      price01: 0,
      price02: 1000,
      options: [
        "0%",
        "10%",
        "20%",
        "30%",
        "40%",
        "50%",
        "60%",
        "70%",
        "80%",
        "90%",
        "100%"
      ],
      rate01: "0%",
      rate02: "100%",
      budget: "上海",
      activePrice: 6, //6:《一万元
      talentRadio: "达人1",
      finishFlag: true, //后续改成false
      cancel: null,
      // 商品搜索结果
      goodsPage: 1,
      goodsList: [],
      orderBy: 1, //1降序 0升序
      sort: 1,
      loadingG: true,
      // 匹配出的达人
      talentList: [],
      cancel01: null,
      loadingP: true,
      priceMine: "",
      cancel02: null,
      talentId: "",
      talentInfo: {},
      talentIdList: [],
      cancel03: null,
      cancel04: null,
      talentScoreList: [],
      livepriceList: {},
      // 商品
      finishFlag01: false,
      goodsKindData: [],
      // 价格分类
      cancel05: null,
      finishFlag02: false,
      priceKindList: [],
      loading01: true,
      loading02: true,
      // 性别
      cancel06: null,
      loading03: false,
      genderList: [],
      // 年龄
      ageXData: [],
      // ageYData: [],
      // 战绩
      cancel07: null,
      tableData: [],
      loading04: false,
      loadingD: true,
      // 历史记录
      cancel08: null,
      pageH: 1,
      historyList: [],
      busy: false,
      loadingH: true,
      talentCount: "",
      matchTime: "",
      countH: "",
      isNull: false
    };
  },
  computed: {},
  watch: {
    goodsWord: function () {
      if (this.goodsWord == "") {
        this.goodsPage = 1;
        this.goodsList = [];
        this.checked = "";
        this.toSearchGoods();
      }
    },
    talentRadio: function () {
      switch (this.talentRadio) {
        case "达人1":
          this.talentId = this.talentIdList[0];
          this.getTalentData();
          break;
        case "达人2":
          this.talentId = this.talentIdList[1];
          this.getTalentData();
          break;
        case "达人3":
          this.talentId = this.talentIdList[2];
          this.getTalentData();
          break;
        case "达人4":
          this.talentId = this.talentIdList[3];
          this.getTalentData();
          break;
        case "达人5":
          this.talentId = this.talentIdList[4];
          this.getTalentData();
          break;

        default:
          break;
      }
    }
  },
  created () { },
  mounted () { },

  methods: {
    getData () { },
    // 选择商品
    checkGoods (item, index, satus) {
      this.$set(item, index, satus);
    },
    // 排序
    sort_fun (parm01, parm02) {
      if (parm01) {
        this.orderBy = 0;
      } else {
        this.orderBy = 1;
      }
      this.sort = parm02;
      this.goodsPage = 1;
      this.goodsList = [];
      this.toSearchGoods();
    },
    toSearch () {
      if (this.goodsWord != "") {
        this.showGoods = 2;
        this.checked = "";
        this.toSearchGoods();
        this.isNull = false;
      } else {
        this.isNull = true;
      }
    },
    // 为了清空checked
    toSearchGoods01 () {
      this.checked = "";
      this.toSearchGoods();
    },
    // 搜索
    toSearchGoods (cpage) {
      // 价格  price01 price02
      //佣金率 rate01  rate02
      // 排序
      let that = this;
      that.loadingG = true;
      if (cpage) {
        that.goodsPage = cpage;
      }
      that.$axios
        .post(
          "/api/intelligent/productsearch",
          {
            key: that.trimStr(that.goodsWord),
            startPrice: Number(that.price01),
            endPrice: Number(that.price02),
            startCommissionRate: Number(that.rate01.split("%")[0] / 100), //佣金比率
            endCommissionRate: Number(that.rate02.split("%")[0] / 100), //佣金比率
            sort: that.sort, //排序字段 1=订单量 2=全网销量
            order: that.orderBy, //1 降序 0升序（默认1）
            pageIndex: that.goodsPage,
            pageSize: 10
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.count = res.data.count;
            that.goodsList = res.data.data;
            if (that.checked == "") {
              that.checked = that.goodsList[0].proId;
            }
            that.loadingG = false;
          } else if (res.data.code == 1002) {
            this.goodsList = [];
            that.loadingG = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 检查售价  设定最大值最小值
    checkValue () {
      if (Number(this.price01) < 0) {
        this.price01 = 0;
      }

      if (Number(this.price01) > 10000000) {
        this.price01 = 10000000;
      }

      if (Number(this.price02) < 0) {
        this.price02 = 0;
      }
      if (Number(this.price02) > 10000000) {
        this.price02 = 10000000;
      }
    },
    add () {
      this.price01 = "";
    },
    // 检查售价
    checkPrice () {
      // 交换
      if (Number(this.price01) > Number(this.price02)) {
        let num = 0;
        num = this.price02;
        this.price02 = this.price01;
        this.price01 = num;
      }
      // 值不能为空
      if (this.price01 != "" && this.price02 != "") {
        this.goodsPage = 1;
        this.goodsList = [];
        this.checked = "";
        this.toSearchGoods();
      }
    },
    // 检查佣金率
    checkRate () {
      let a = this.rate01.indexOf("%");
      let rate1 = this.rate01.substring(0, a);
      let b = this.rate02.indexOf("%");
      let rate2 = this.rate02.substring(0, b);
      if (Number(rate1) > Number(rate2)) {
        let num = 0;
        num = this.rate01;
        this.rate01 = this.rate02;
        this.rate02 = num;
      }
      // 值不能为空
      if (this.rate01 != "" && this.rate02 != "") {
        this.goodsPage = 1;
        this.goodsList = [];
        this.checked = "";
        this.toSearchGoods();
      }
    },
    // 查看匹配详情
    toMatchDetails (item) {
      let that = this;
      this.checked = item.productId;
      this.activePrice = item.priceDescription;
      this.activePrice = item.type;
      that.talentIdList = [];
      that.talentScoreList = [];
      item.listDetail.forEach(item => {
        this.talentIdList.push(item.author);
      });
      item.listDetail.forEach(item => {
        this.talentScoreList.push(item.score);
      });
      this.matchTime = item.createTime;
      this.talentCount = item.total;
      this.talentId = this.talentIdList[0];
      this.talentRadio = "达人1";
      this.getTalentData();
    },
    // 智能匹配
    productmatch () {
      let that = this;
      this.showDiv = 4;
      this.talentRadio = "达人1";
      that.talentIdList = [];
      that.talentScoreList = [];
      that.loadingP = true;
      if (
        that.activePrice != 1 &&
        that.activePrice != 2 &&
        that.activePrice != 3 &&
        that.activePrice != 4 &&
        that.activePrice != 5 &&
        that.activePrice != 6
      ) {
        that.activePrice = Number(that.priceMine * 10000);
      }
      that.$axios
        .post(
          "/api/intelligent/productmatching",
          {
            ProId: that.checked,
            Price: that.activePrice //价格 1=10w+；2=8w-10w；3=5w-8w；4=3w-5w；5=1w-3w；6=1w以下，其他自定义
            // Price: 1,
          },
          {
            timeout: 0 //超时时间不限制
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.talentList = res.data.data;
            that.talentCount = res.data.count;
            that.matchTime = res.data.msg;
            // id
            if (res.data.data != null) {
              that.talentList.forEach(element => {
                that.talentIdList.push(element.authorId);
              });
              // 匹配分
              that.talentList.forEach(element => {
                that.talentScoreList.push(element.score);
              });
              that.talentId = this.talentIdList[0];
              that.getTalentData();
            }
            that.loadingP = false;
          } else if (res.data.code == 1002) {
            that.talentList = [];
            that.loadingP = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getTalentData () {
      this.showDiv = 4;
      this.loadingP = false;
      // 匹配到的达人信息
      this.getTalentInfo();
      this.liveprice();
      this.proKindData();
      this.getPriceKind();
      this.getGenderData();
      this.getTable();
    },
    // 智能匹配信息
    getTalentInfo () {
      let that = this;
      that.loadingD = true;
      that.$axios
        .get(
          "/api/author/analysis",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.talentInfo = res.data.data;
            that.loadingD = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //直播报价
    liveprice () {
      let that = this;
      that.$axios
        .get(
          "/api/author/liveprice",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.livepriceList = res.data.data;
          } else if (res.data.code == 1002) {
            that.livepriceList = {};
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品分类
    proKindData () {
      let that = this;
      that.loading01 = true;
      that.$axios
        .get(
          "/api/author/analysisprocate",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.goodsKindData = res.data.data;
            that.loading01 = false;
          } else if (res.data.code == 1002) {
            that.goodsKindData = [];
            that.loading01 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品价格分类
    getPriceKind () {
      let that = this;
      that.loading02 = true;
      that.$axios
        .get(
          "/api/author/analysisprice",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel05 != null) {
                that.cancel05();
              }
              that.cancel05 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.priceKindList = res.data.data;
            that.loading02 = false;
          } else if (res.data.code == 1002) {
            that.priceKindList = [];
            that.loading02 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 直播观众性别年龄分析
    getGenderData () {
      let that = this;
      that.loading03 = true;
      that.$axios
        .get(
          "/api/author/analysisfans",
          {
            params: {
              authorId: that.talentId
              // authorId: "84990209480",
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel06 != null) {
                that.cancel06();
              }
              that.cancel06 = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            that.genderList = res.data.data.fansSexList;
            that.ageXData = res.data.data.fansAgeList;
            that.loading03 = false;
          } else {
            that.genderList = [];
            that.ageXData = [];
            that.loading03 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 战绩
    getTable () {
      let that = this;
      that.loading04 = true;
      that.$axios
        .get(
          "/api/author/analysislive",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel07 != null) {
                that.cancel07();
              }
              that.cancel07 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.tableData = res.data.data;
            that.loading04 = false;
          } else if (res.data.code == 1002) {
            that.tableData = [];
            that.loading04 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    seeHistory () {
      this.showDiv = 5;
      this.pageH = 1;
      this.historyList = [];
      this.getHistoryList();
    },
    // 历史记录
    getHistoryList (cpage) {
      let that = this;
      this.loadingH = true;
      if (cpage) {
        that.pageH = cpage;
      }
      that.$axios
        .get(
          "/api/intelligent/productMatchHistory",
          {
            params: {
              pageIndex: that.pageH,
              pageSize: 10
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor (c) {
              if (that.cancel08 != null) {
                that.cancel08();
              }
              that.cancel08 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.historyList = res.data.data;
            this.countH = res.data.count;
            that.loadingH = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳商品详情
    toGoodsPage (id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`
      });
      window.open(router.href, "_blank");
    },
    // 跳达人详情
    toTalentPage (id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, "_blank");
    },
    // 查看示例图
    toEgImg () {
      let that = this;
      // console.log("routerName", this.routerName);
      let router = this.$router.resolve({
        path: `/egImg/matchEg`
      });
      window.open(router.href, "_blank");
    },
    // 导出pdf
    exportPdf () {
      let _this = this;
      document.documentElement.scrollTop = 0;
      let canvas = document.createElement("canvas"); // 生成canvas上下文
      let context = canvas.getContext("2d");
      let _articleHtml = this.$refs.capture;
      let _w = _articleHtml.clientWidth; //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight;
      let scale = 3; //将画布宽&&高放大 增加清晰度
      if (_w > _h) {
        _h = _w;
      }
      canvas.width = _w * scale;
      canvas.height = _h * scale;
      context.scale(scale, scale);
      context.fillStyle = "#f5f5f5";
      let opts = {
        scale: 1,
        width: _w, //dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      };
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then(canvas => {
        _this.createPdfAll(canvas, scale);
      });
    },
    //自定义宽高
    createPdfAll (canvas, scale) {
      let contentWidth = canvas.width / scale;
      let contentHeight = canvas.height / scale;
      let pdf = new jsPDF("", "pt", [contentWidth, contentHeight]); //自定义宽高
      let pageData = canvas.toDataURL("image/jpeg", 1.0); //转换图片为dataURL
      pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight); //添加图像到页面
      pdf.save(`智能匹配.pdf`);
    },
    // 初始化
    clearOptions () {
      this.price01 = 0;
      this.price02 = 1000;
      this.rate01 = "0%";
      this.rate02 = "100%";
    }
  }
};
</script>
<style lang="less" scoped>
#findTalent {
  width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  overflow: auto;
  .addTop {
    margin-top: 100px;
  }
  .showDiv01 {
    .div01 {
      width: 100%;
      position: relative;
      margin-top: 117px;
      line-height: 40px;
      p {
        width: 500px;
        margin: 0 auto;
        font-size: 36px;
        color: #222222;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
        span {
          font-size: 36px;
          color: #1879ff;
        }
      }
      .history {
        cursor: pointer;
        font-size: 14px;
        color: #ff7419;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .startBtn {
      //   display: block;
      width: 180px;
      height: 68px;
      line-height: 68px;
      text-align: center;
      background-color: #ff7419;
      border-radius: 34px;
      font-size: 18px;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 39px;
      margin-bottom: 81px;
      cursor: pointer;
    }
    .hvr-ripple-out {
      // display: inline-block;
      vertical-align: middle;
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px transparent;
      position: relative;
    }
    .hvr-ripple-out:before {
      content: "";
      position: absolute;
      border: #f78002 solid 6px;
      border-radius: 4px;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
    }
    .imgBox {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .imgItem {
        width: 396px;
        height: 520px;
        position: relative;
        img {
          width: 380px;
          height: 500px;
          border-radius: 10px;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        img:hover {
          transition: all 0.3s;
          width: 396px !important;
          height: 520px !important;
        }
      }
    }
  }
  .showDiv02 {
    overflow: hidden;
    .talentBanner {
      width: 1201px;
      height: 54px;
      border-radius: 4px;
      margin-top: 14px;
    }
    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: 26px auto;
    }
    .showGoods {
      width: 100%;
      min-height: 822px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          width: 101px;
          height: 40px;
          background-color: #1879ff;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
        }
        span {
          font-size: 14px;
          color: #ff7419;
          cursor: pointer;
        }
      }
      //   条件
      .condition {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        .title {
          font-size: 14px;
          color: #222222;
        }
        .conditionItem {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 17px;
          .itemTitle {
            font-size: 14px;
            color: #555555;
            padding-right: 10px;
          }
          .itemTitle1 {
            padding-left: 13px;
          }
          .inputBox {
            position: relative;
            input {
              box-sizing: border-box;
              width: 120px;
              height: 32px;
              background-color: #f5f5f5;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              padding-left: 10px;
              padding-right: 45px;
            }
            span {
              font-size: 14px;
              color: #555555;
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translate(-50%, -50%);
            }
          }
          .to {
            font-size: 13px;
            color: #888888;
            padding: 0 6px;
          }
        }
      }
      .tips {
        font-size: 14px;
        color: #888888;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      //   table
      table {
        thead {
          img {
            width: 5px;
            height: 10px;
            vertical-align: 0;
            margin-right: 2px;
            cursor: pointer;
          }
          tr {
            th:nth-child(1) {
              text-align: left;
              padding-left: 52px;
              width: 325px;
            }
            th:last-child {
              width: 140px;
            }
          }
        }
        tbody {
          tr {
            height: 77px;
            td {
              text-align: center;
            }
            td:nth-child(2) {
              font-size: 16px;
              color: #ea1a0d;
            }
            td:nth-child(3) {
              font-size: 16px;
              color: #222222;
            }
            td:nth-child(4) {
              font-size: 16px;
              color: #222222;
            }
            td:nth-child(5),
            td:nth-child(6) {
              font-size: 16px;
              color: #1779ff;
            }
          }
        }
        .goodsBox {
          cursor: pointer;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 26px;
          .avator {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
            margin-right: 15px;
          }
          .source {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          p {
            font-size: 16px;
            color: #222222;
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
        }
        .checkImg {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
      // 按钮
      .optionBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 106px;
        margin-bottom: 35px;
        button:nth-child(1) {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          border: solid 1px #1879ff;
          font-size: 14px;
          color: #1879ff;
        }
        button:nth-child(2) {
          width: 115px;
          height: 40px;
          background-color: #1879ff;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
      }
    }
  }
  .showDiv04 {
    background-color: #f5f5f5;
    .topDiv {
      box-sizing: border-box;
      width: 1200px;
      height: 100px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      margin: 14px 0;
      div {
        display: flex;
        justify-content: space-between;
        p {
          font-size: 18px;
          color: #222222;
          font-weight: 600;
        }
        button {
          width: 88px;
          height: 32px;
          background-color: #ff7419;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
        }
        span:nth-child(1) {
          font-size: 14px;
          color: #888888;
        }
        span:nth-child(2) {
          font-size: 14px;
          color: #ff7419;
          cursor: pointer;
        }
      }
      div:nth-child(2) {
        margin-top: 11px;
      }
    }
    .tips {
      font-size: 14px;
      color: #888888;
      span {
        font-size: 14px;
        color: #1879ff;
        cursor: pointer;
      }
    }
    .tabBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 13px;
      .export {
        cursor: pointer;
        width: 80px;
        height: 32px;
        background-color: #f8f8f8;
        border-radius: 4px;
        border: solid 1px #e6e6e6;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 13px;
          height: 13px;
        }
        span {
          cursor: pointer;
          font-size: 14px;
          color: #222222;
          padding-left: 8px;
        }
      }
    }
    .detailsBox {
      background-color: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 20px;
      margin-top: 14px;
      .talentDiv01 {
        height: 150px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .div01 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .avator {
            width: 72px;
            height: 72px;
            border: 1px solid #e5e5e5;
            border-radius: 50%;
            cursor: pointer;
          }
          .infoBox {
            margin-left: 16px;
            .titleBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              p {
                cursor: pointer;
                font-size: 18px;
                color: #222222;
                max-width: 217px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 600;
              }
              img {
                width: 16px;
                height: 16px;
                margin-left: 9px;
              }
            }
            .idText {
              font-size: 13px;
              color: #222222;
              padding-top: 3px;
              max-width: 217px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .info {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 4px;
              div {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-right: 10px;
                img {
                  width: 16px;
                  height: 14px;
                }
                span {
                  font-size: 14px;
                  color: #555555;
                  padding-right: 10px;
                  padding-left: 6px;
                }
                p {
                  width: 1px;
                  height: 12px;
                  background-color: #e5e5e5;
                }
              }
            }
          }
        }
        .div02 {
          width: 570px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .divItem {
            width: 100%;
            display: flex;
            .itemdiv {
              p {
                text-align: center;
              }
              p:nth-child(1) {
                font-family: DINAlternate-Bold;
                font-size: 18px;
                color: #222222;
              }
              p:nth-child(2) {
                font-size: 14px;
                color: #555555;
                padding-top: 11px;
              }
            }
            .itemdiv:nth-child(1) {
              width: 155px;
            }
            .itemdiv:not(:first-child) {
              flex: 1;
            }
          }
          .divItem:nth-child(2) {
            margin-top: 20px;
          }
        }
        .div03 {
          box-sizing: border-box;
          width: 180px;
          height: 150px;
          background-color: #fcfcfc;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          padding: 0 26px;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            p {
              text-align: center;
            }
            p:nth-child(1) {
              font-size: 22px;
              color: #ff7419;
              font-family: DINAlternate-Bold;
            }
            p:nth-child(2) {
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                font-size: 14px;
                color: #555555;
              }
              img {
                width: 16px;
                height: 16px;
                margin-left: 4px;
                cursor: pointer;
              }
            }
          }
          div:nth-child(1) {
            border-bottom: solid 1px #e5e5e5;
          }
        }
      }
      .talentDiv02 {
        .priceBox {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 18px;
          .priceItem {
            position: relative;
            width: 25%;
            p {
              text-align: center;
            }
            p:nth-child(1) {
              font-size: 16px;
              color: #ff7419;
            }
            p:nth-child(2) {
              font-size: 14px;
              color: #555555;
              padding-top: 3px;
            }
          }
          .priceItem::after {
            display: block;
            content: "";
            width: 1px;
            height: 26px;
            background-color: #e5e5e5;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(50%, -50%);
          }
          .priceItem:last-child::after {
            display: none;
          }
        }
      }
      // echarts部分
      .talentDiv03 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        margin-top: 38px;
        .pieItem {
          width: 50%;
          .pieChartBox {
            height: 318px;
          }
        }
      }
      // 直播战绩
      .talentDiv04 {
        table {
          margin-top: 14px;
          // thead {
          // }
          tbody {
            tr {
              height: 54px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .showDiv05 {
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 14px;
    min-height: 100vh;
    height: fit-content;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        width: 129px;
        height: 40px;
        background-color: #1879ff;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
      }
      span {
        font-size: 14px;
        color: #ff7419;
        cursor: pointer;
      }
    }
    table {
      margin-top: 20px;
      thead {
        tr {
          th:nth-child(2) {
            width: 350px;
          }
        }
      }
      tbody {
        tr {
          height: 77px;
          text-align: center;
        }
      }
    }
    .goodsBox {
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 26px;
      .avator {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
        margin-right: 15px;
      }
      .source {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      p {
        font-size: 16px;
        color: #222222;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
    }
    .detailsBtn {
      width: 88px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
    }
    .talentBox {
      display: flex;
      justify-content: center;
      cursor: pointer;
      img {
        border-radius: 50%;
        width: 42px;
        height: 41px;
        background-color: #439ae8;
        border: solid 6px #ffffff;
        margin-left: -12px;
      }
    }
  }
  .addtop {
    margin-top: 38px;
  }
  // title
  .myTitleBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 17px;
      height: 16px;
    }
    p {
      font-size: 14px;
      color: #222222;
      padding-left: 26px;
      // font-weight: 600;
    }
    .bigText {
      font-size: 16px;
      color: #222222;
      padding-left: 9px;
      // font-weight: 600;
    }
  }
  // 预算
  .budgetBox {
    background-color: #ffffff;
    min-height: 822px;
    padding: 20px;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        button {
          width: 101px;
          height: 40px;
          line-height: 40px;
          background-color: #1879ff;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
        }
        p {
          font-size: 14px;
          color: #222222;
          padding-left: 10px;
          span {
            color: #888888;
          }
        }
      }
      .rightText {
        font-size: 14px;
        color: #ff7419;
        cursor: pointer;
      }
    }
    .budgetRadio {
      width: 954px;
      margin: 0 auto;
      margin-top: 53px;
      display: flex;
      justify-content: space-between;
      .radioItem {
        cursor: pointer;
        width: 140px;
        height: 100px;
        background-color: #fafafa;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        p {
          text-align: center;
        }
        p:nth-child(1) {
          font-size: 20px;
          color: #ff7419;
          font-weight: 600;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #555555;
        }
        .myPrice {
          border: none;
          border-bottom: 1px solid #b5b5b5;
          width: 62px;
          padding: 2px 5px;
          background-color: transparent;
          margin-bottom: 5px;
          font-size: 20px;
          color: #ff7419;
          text-align: center;
        }
      }
      .activePrice {
        width: 140px;
        height: 100px;
        background-color: #fff9f5;
        border-radius: 10px;
        border: solid 2px #ff7419;
      }
    }
    .buttonBox {
      width: 456px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      margin-top: 90px;
      button:nth-child(1) {
        width: 115px;
        height: 40px;
        border-radius: 4px;
        border: solid 1px #1879ff;
        font-size: 14px;
        color: #1879ff;
      }
      button:nth-child(2) {
        width: 115px;
        height: 40px;
        background-color: #1879ff;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
      }
      button:nth-child(3) {
        width: 115px;
        height: 40px;
        border-radius: 4px;
        border: solid 1px #ff7419;
        font-size: 14px;
        color: #ff7419;
      }
    }
  }

  .searchBox {
    width: 513px;
    height: 51px;
    border-radius: 4px;
    border: solid 1px #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 216px;
    input {
      width: 436px;
      height: 51px;
      line-height: 51px;
      border: none;
      padding-left: 21px;
      padding-right: 21px;
    }
    div {
      width: 77px;
      height: 51px;
      background-color: #1879ff;
      border-radius: 4px;
      position: relative;
      img {
        cursor: pointer;
        width: 21px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .errText {
    width: 513px;
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
    color: #ea1b0b;
    padding-top: 10px;
    padding-left: 5px;
  }
  .searchBox01 {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-left: 0;
    input {
      width: 360px;
      height: 40px;
      line-height: 40px;
    }
    div {
      width: 60px;
      height: 40px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
// 联系客服
.message_content img {
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
.kefuText {
  font-size: 22px;
  color: #ff7419;
  // font-family: DINAlternate-Bold;
}
.kefuText01 {
  font-size: 14px;
  color: #555;
}
</style>
